<template>
    <div>
        <a-input-image
            color="primary"
            v-model:value="img"
            :uploadFunc="uploadFunc"
            :getSrcFunc="getSrcFunc"
        ></a-input-image>
        <pre class="language-html"><code>{{ `<a-input-image
    color="primary"
    v-model:value="img"
    :uploadFunc="uploadFunc"
    :getSrcFunc="getSrcFunc"
></a-input-image>` }}</code></pre>
<pre class="language-javascript"><code>{{ `import utils from '../../common/utils'

export default {
    data() {
        return {
            img: null,
            fakeImgs: [
                '32ad255a-8065-4763-a329-bb440859c2a9.jpg',
                '58c38d00-54b0-11eb-8b12-0b23616aea8a.jpg',
                '58d56750-54b0-11eb-8b12-0b23616aea8a.jpg',
                '58ac8290-54b0-11eb-8b12-0b23616aea8a.jpg',
            ],
            fakeImgIndex: 0,
        }
    },
    methods: {
        async uploadFunc(file) {
            await utils.sleep(1000)
            this.fakeImgIndex = (this.fakeImgIndex + 1) % 4
            return this.fakeImgs[this.fakeImgIndex]
        },
        getSrcFunc(id) {
            return \`http://snacksmart-dev.oss-accelerate.aliyuncs.com/\${id}\`
        }
    }
}` }}</code></pre>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<script>
import utils from '../../common/utils'

export default {
    data() {
        return {
            img: null,
            fakeImgs: [
                '32ad255a-8065-4763-a329-bb440859c2a9.jpg',
                '58c38d00-54b0-11eb-8b12-0b23616aea8a.jpg',
                '58d56750-54b0-11eb-8b12-0b23616aea8a.jpg',
                '58ac8290-54b0-11eb-8b12-0b23616aea8a.jpg',
            ],
            fakeImgIndex: 0,
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                        { name: 'disabled', remark: '是否禁用', type: 'boolean', default: 'false' },
                        { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                        { name: 'sharp', remark: '是否尖角', type: 'boolean', default: 'false' },
                        { name: 'rules', remark: '表单验证规则', type: 'Array<{name: required | minLength | maxLength | pattern | func, value: number | boolean | Function | any, errorMessage: string}>', default: '[]' },
                        { name: 'value', remark: '值', type: 'any', default: 'null' },
                        { name: 'getSrcFunc', remark: '根据文件id获取图片链接的方法', type: 'Function', default: 'id => `https://abc.xyz/file/${id}`' },
                        { name: 'accept', remark: '允许的图片格式', type: 'image/jpeg, image/bmp, image/png, image/gif', default: 'null' },
                        { name: 'uploadFunc', remark: '上传文件的方法，支持异步', type: 'Function', default: 'file => "fakeimg.ext"' },
                        { name: 'minWidth', remark: '图片的最小宽度，留空表示不限制，单位：像素', type: 'number', default: 'null' },
                        { name: 'maxWidth', remark: '图片的最大宽度，留空表示不限制，单位：像素', type: 'number', default: 'null' },
                        { name: 'minHeight', remark: '图片的最小高度，留空表示不限制，单位：像素', type: 'number', default: 'null' },
                        { name: 'maxHeight', remark: '图片的最大高度，留空表示不限制，单位：像素', type: 'number', default: 'null' },
                        { name: 'minSize', remark: '图片的最小尺寸，留空表示不限制，单位：字节', type: 'number', default: 'null' },
                        { name: 'maxSize', remark: '图片的最大尺寸，留空表示不限制，单位：字节', type: 'number', default: 'null' },
                        { name: 'validateImgFunc', remark: '验证图片是否有效的方法', type: 'Function', default: '(width, height, size) => true' },
                    ],
                },
                {
                    name: 'emits',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'params', text: '参数' },
                    ],
                    dataList: [
                        { name: 'update:value', remark: '值发生变化', params: 'any' },
                        { name: 'validate', remark: '输入验证', params: '[boolean, string]' },
                    ],
                }
            ]
        }
    },
    methods: {
        async uploadFunc(file) {
            await utils.sleep(1000)
            this.fakeImgIndex = (this.fakeImgIndex + 1) % 4
            return this.fakeImgs[this.fakeImgIndex]
        },
        getSrcFunc(id) {
            return `http://snacksmart-dev.oss-accelerate.aliyuncs.com/${id}`
        }
    }
}
</script>